<!-- 户号 列表 -->
<template>
	<view v-for="item in listData" style="padding: 10px;">
		<uni-card :is-shadow="false" padding="0" spacing="0" margin="0">
			<uni-list :border="false">
				<uni-list-item title="用电户号" :rightText="item.yhbh + ''" />
				<uni-list-item title="用户名称" :rightText="item.yhmc + ''" />
				<uni-list-item title="手机号" :rightText="item.dlzh + ''" />
				<uni-list-item title="预存余额" :rightText="item.dqjy ? item.dqjy + '' : ''" />
				<uni-list-item title="欠电费" :rightText="item.dqqf ? item.dqqf + '' : ''" />
			</uni-list>
			<view slot="actions">
				<uni-row>
					<uni-col :span="12" v-if="item.dqqf > 0">
						<navigator :url="'/pages/bspsd/business/payfees/payover?yhbh=' + item.yhbh" hover-class="none">
							<view class="item-btn item-btn1">缴费</view>
						</navigator>
					</uni-col>
					<uni-col :span="12" v-else>
						<navigator :url="'/pages/bspsd/business/payfees/index?yhbh=' + item.yhbh" hover-class="none">
							<view class="item-btn item-btn2">缴费记录</view>
						</navigator>
					</uni-col>
					<uni-col :span="12">
						<view class="item-btn item-btn3" @click="removeClick(item)">解绑户号</view>
					</uni-col>
				</uni-row>
			</view>
		</uni-card>
	</view>
	<cNoData v-if="listData.length < 1" />
</template>

<script setup lang="ts">
	import cNoData from "@/pages/bspsd/components/no-data.vue";
	import { HlwYxyh } from "@/api/tables/HlwYxyh";
	import { getPhone } from "@/utils/storage";
	import { GetHuHaoByPhone } from "@/api/request/GetHuHaoByPhone";
	import { JieBangHuHao } from "@/api/request/JieBangHuHao";
	import { onBeforeMount, ref } from 'vue';

	let listData = ref<Array<HlwYxyh>>([]);

	onBeforeMount(() => {
		getListData()
	})

	function getListData() {
		GetHuHaoByPhone({
			data: {
				dlzh: getPhone(),
				bdzt: '0'
			},
			success: (res) => {
				listData.value = res
			},
			fail: (code, message) => {
				console.log(code, message)
			}
		})
	}

	// 户号解绑
	function removeClick(item: HlwYxyh) {
		uni.showModal({
			title: '提示',
			content: '是否确定解绑',
			success: function (res) {
				if (res.confirm) {
					JieBangHuHao({
						data: {
							yxyh: {
								dlzh: item.dlzh,
								yhbh: item.yhbh,
							}
						},
						success: () => {
							uni.showToast({ icon: "success", title: '解绑成功' })
							getListData()
						},
						fail: (code, message) => {
							uni.showToast({ icon: "none", title: message })
						}
					})
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	.item-btn {
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		line-height: 80rpx;
	}

	.item-btn1 {
		background-color: #18bc37;
		border-color: #18bc37;
	}

	.item-btn2 {
		background-color: #f3a73f;
		border-color: #f3a73f;
	}

	.item-btn3 {
		background-color: #e43d33;
		border-color: #e43d33;
	}

	.item-btn4 {
		background-color: #2979ff;
		border-color: #2979ff;
	}
</style>